<template>
	<div class="kp-bank">
		<!--暂无银行卡-->
		<div class="bank_no" v-if="MyBankcardList.length == 0">
			<img src="../../../assets/yinhangka1.png" />
			<p class="bank_nop">您还没有添加银行卡</p>
		</div>
		<!--已有银行卡-->
		<div class="bank_con" v-else>
			<div class="bank_title">
				<span class="bank_span">我的银行卡（{{MyBankcardList.length}}张）</span>
			</div>
			<div class="bank_list">
				<!--建设银行-->
				<div class="bank_listc" data-type="0" v-for="(item,index) in MyBankcardList">
					<div class="bank_item mb20" :class="bankCls" @touchstart.capture.prevent="touchStart" @touchend.capture.prevent="touchEnd($event)" v-if="item.bank_code =='01050000'">
						<div class="bank_top">
							<p><span class="bank_topS">{{item.bank_name}}</span><em class="bank_em" v-if="item.defaultStatus==1">默认</em></p>
							<p class="bank_top_p"><span class="bank_topC" v-if="item.card_type==2">储蓄卡</span><span class="bank_topC" v-else="item.card_type==3">信用卡</span></p>
						</div>
						<div class="bank_bot wccy-after"><span class="bank_botS">****<em>****</em>****</span><span class="bank_botC">{{item.bankc}}</span></div>
					</div>
					<div class="delet">
						<span class="del_set" @click="setDefalut(item.bankCard,$event)">设为默认</span>
						<span class="del_reli" @click="bankcardUnbind(item.bankCard)">解绑</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				startX: 0,
				endX: 0,
				MyBankcardList:[],
				bankList:[
					{bank_code: "01040000",bankClass:'bank_item_zg'},
					{bank_code: "03080000",bankClass:'bank_item_zha'},
					{bank_code: "03030000",bankClass:'bank_item_gd'},
					{bank_code: "03010000",bankClass:'bank_item_jt'},
					{bank_code: "04012900",bankClass:'bank_item_sh'},
					{bank_code: "03060000",bankClass:'bank_item_gf'},
					{bank_code: "03050000",bankClass:'bank_item_ms'},
					{bank_code: "01020000",bankClass:'bank_item_gs'},
					{bank_code: "03160000",bankClass:'bank_item_zs'},
					{bank_code: "01000000",bankClass:'bank_item_yz'},
					{bank_code: "03100000",bankClass:'bank_item_pf'},
					{bank_code: "04031000",bankClass:'bank_item_bj'},
					{bank_code: "03020000",bankClass:'bank_item_zx'},
					{bank_code: "04233310",bankClass:'bank_item_hz'},
					{bank_code: "01030000",bankClass:'bank_item_ny'},
					{bank_code: "03090000",bankClass:'bank_item_xy'},
					{bank_code: "01050000",bankClass:'bank_item_js'},
					{bank_code: "03040000",bankClass:'bank_item_hx'},
					{bank_code: "03070000",bankClass:'bank_item_pa'},
				],
				bankCls:'',
				nobank:false,
			}
		},
		mounted() {
			//获取支持的银行
//			this.getbank();
			//获取银行卡
			this.getdetail();
		},
		methods: {
			//滑动开始
			touchStart(e) {
				this.startX = e.touches[0].clientX;
			},
			touchEnd(e) {

				let parentElement = e.currentTarget.parentElement;
				// 记录结束位置
				this.endX = e.changedTouches[0].clientX;
				// 左滑
				if(parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
					this.restSlide();
					parentElement.dataset.type = 1;
					e.preventDefault();
				}
				// 右滑
				if(parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
					this.restSlide();
					parentElement.dataset.type = 0;
					e.preventDefault();
				}
				this.startX = 0;
				this.endX = 0;
			},
			//判断当前是否有滑块处于滑动状态
			checkSlide() {
				let listItems = document.querySelectorAll('.bank_listc');
				for(let i = 0; i < listItems.length; i++) {
					if(listItems[i].dataset.type == 1) {
						return true;
					}
				}
				return false;
			},
			//复位滑动状态
			restSlide() {
				let listItems = document.querySelectorAll('.bank_listc');
				// 复位
				for(let i = 0; i < listItems.length; i++) {
					listItems[i].dataset.type = 0;
				}
			},
			//删除
			deleteItem(e) {
				// 当前索引
				let index = e.currentTarget.dataset.index;
				// 复位
				this.restSlide();
				// 删除
				this.list.splice(index, 1);
			},
			getdetail(){
				let param={
					"userID":this.userinfo.userID
				};
				let that = this;
				this.$http.post(
					this.$baseUrl.baseurl + "kpcx/appMyWallet/myBankCard",
					param
				).then((res) => {
					console.log(res);
					if(res.data.Code == 0) {
						var MyBankcardList = res.data.Result.MyBankcardList;
						MyBankcardList&&MyBankcardList.forEach((item)=>{
							if(item.bankCard){
								item.bankc =  item.bankCard.substring(item.bankCard.length-4);
							}
						})
						that.bankList.forEach((item)=>{
							if(res.data.Result.MyBankcardList[0].bank_code==item.bank_code){
								that.bankCls = item.bankClass
							}
						})
						this.MyBankcardList = res.data.Result.MyBankcardList;
					} else {
						that.$toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});
				
			},
			getbank(){
				let param={
					"productType":"3",
					"payChnl":"10"
				};
				this.$http.post(
					this.$baseUrl.baseurl + "kpcx/appOrders/lianlianBankList",
					param
				).then((res) => {
					if(res.data.Code == 0) {
						
					} else {
						that.$toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});
				
			},
			setDefalut(bankCard,e){
				
				this.$loading.show();
				let param={
					"userID":this.userinfo.userID,
					"bankcard":bankCard
				};
				let that = this;
				let parentElement = e.currentTarget.parentElement;
				
				this.$http.post(
					this.$baseUrl.baseurl + "kpcx/appMyWallet/changeToDefault",
					param
				).then((res) => {
					if(res.data.Code == 0) {
						that.restSlide();
						parentElement.dataset.type = 0;
						e.preventDefault();
						that.$loading.hide();
					} else {
						that.$toast(res.data.msg);
						that.$loading.hide();
					}
				}).catch((err) => {
					console.log(err);
					that.$loading.hide();
				});
			},
			bankcardUnbind(bankCard){
				let param={
					"userID":this.userinfo.userID,
					"bankcard":bankCard
				};
				let that = this;
				this.$http.post(
					this.$baseUrl.baseurl + "kpcx/appOrders/bankcardUnbind",
					param
				).then((res) => {
					if(res.data.Code == 0) {
						that.MyBankcardList = [];
					} else {
						that.$toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});
			}

		},
		created() { //创建后
		},
		watch: {
			//监听放置
		},
		components: {

		},
		computed: {
			...mapGetters([
				'userinfo'
			])
		}
	};
</script>

<style>
	.mb20 {
		margin-bottom: 20px;
	}
	
	body,
	html {
		background: rgb(244, 245, 248);
	}
	
	.kp-bank {
		padding-top: 86px;
		font-family: "MicrosoftYaHei";
	}
	
	.bank_no {
		width: 310px;
		margin: 242px auto 0;
		display: block;
	}
	
	.bank_no>img {
		width: 310px;
		height: auto;
	}
	
	.bank_nop {
		margin-top: 34px;
		font-size: 32px;
		color: #666;
		text-align: center;
		line-height: 1.2;
	}
	
	.bank_title {
		display: inline-block;
		margin: 38px 0 33px 32px;
	}
	
	.bank_span {
		display: inline-block;
		line-height: 1;
		color: rgb(51, 51, 51);
		font-size: 30px;
	}
	
	.bank_list {
		padding: 0 20px;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.bank_item {
		width: 712px;
		height: 222px;
		border-radius: 15px;
		padding: 33px 56px 0 127px;
		box-sizing: border-box;
		color: #fff;
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 712px 222px;
	}
	
	.bank_item::before {
		content: "";
		width: 87px;
		height: 87px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 87px;
		position: absolute;
		left: 33px;
		top: 33px;
	}
	
	.bank_item_js::before {
		background-image: url("../../../assets/bankImg/jsyh.png");
	}
	
	.bank_item_zg::before {
		background-image: url("../../../assets/bankImg/zhongguoyinhang.png");
	}
	
	.bank_item_ny::before {
		background-image: url("../../../assets/bankImg/nyyh.png");
	}
	
	.bank_item_gs::before {
		background-image: url("../../../assets/bankImg/gsyh.png");
	}
	
	.bank_item_yz::before {
		background-image: url("../../../assets/bankImg/yz.png");
	}
	
	.bank_item_pf::before {
		background-image: url("../../../assets/bankImg/pfyh.png");
	}
	
	.bank_item_ms::before {
		background-image: url("../../../assets/bankImg/msyh.png");
	}
	
	.bank_item_hx::before {
		background-image: url("../../../assets/bankImg/hxyh.png");
	}
	
	.bank_item_pa::before {
		background-image: url("../../../assets/bankImg/payh.png");
	}
	
	.bank_item_gf::before {
		background-image: url("../../../assets/bankImg/gfyh.png");
	}
	
	.bank_item_gd::before {
		background-image: url("../../../assets/bankImg/gdyh.png");
	}
	
	.bank_item_jt::before {
		background-image: url("../../../assets/bankImg/jtyh.png");
	}
	
	.bank_item_sh::before {
		background-image: url("../../../assets/bankImg/shyh.png");
	}
	
	.bank_item_hz::before {
		background-image: url("../../../assets/bankImg/hzyh.png");
	}
	
	.bank_item_bj::before {
		background-image: url("../../../assets/bankImg/bjyh.png");
	}
	
	.bank_item_zs::before {
		background-image: url("../../../assets/bankImg/zhengshang.png");
	}
	
	.bank_item_xy::before {
		background-image: url("../../../assets/bankImg/xyyh.png");
	}
	
	.bank_item_zx::before {
		background-image: url("../../../assets/bankImg/zhongxinyinhang.png");
	}
	
	.bank_item_zha::before {
		background-image: url("../../../assets/bankImg/zsyh.png");
	}
	
	.bank_item_js {
		background-image: url('../../../assets/bankImg/jsyh-bg.png');
	}
	
	.bank_item_zg {
		background-image: url('../../../assets/bankImg/zhongguoyinhang-bg.png')
	}
	
	.bank_item_ny {
		background-image: url('../../../assets/bankImg/nyyh-bg.png')
	}
	
	.bank_item_gs {
		background-image: url('../../../assets/bankImg/gsyh-bg.png')
	}
	
	.bank_item_yz {
		background-image: url('../../../assets/bankImg/yz-bg.png')
	}
	
	.bank_item_pf {
		background-image: url('../../../assets/bankImg/pfyh-bg.png')
	}
	
	.bank_item_ms {
		background-image: url('../../../assets/bankImg/msyh-bg.png')
	}
	
	.bank_item_hx {
		background-image: url('../../../assets/bankImg/hxyh-bg.png')
	}
	
	.bank_item_pa {
		background-image: url('../../../assets/bankImg/payh-bg.png')
	}
	
	.bank_item_gf {
		background-image: url('../../../assets/bankImg/gfyh-bg.png')
	}
	
	.bank_item_gd {
		background-image: url('../../../assets/bankImg/gdyh-bg.png')
	}
	
	.bank_item_jt {
		background-image: url('../../../assets/bankImg/jtyh-bg.png')
	}
	
	.bank_item_sh {
		background-image: url('../../../assets/bankImg/shyh-bg.png')
	}
	
	.bank_item_hz {
		background-image: url('../../../assets/bankImg/hzyh-bg.png')
	}
	
	.bank_item_bj {
		background-image: url('../../../assets/bankImg/bjyh-bg.png')
	}
	
	.bank_item_zs {
		background-image: url('../../../assets/bankImg/zhengshang-bg.png')
	}
	
	.bank_item_xy {
		background-image: url('../../../assets/bankImg/xyyh-bg.png')
	}
	
	.bank_item_zx {
		background-image: url('../../../assets/bankImg/zhongxinyinhang-bg.png')
	}
	
	.bank_item_zha {
		background-image: url('../../../assets/bankImg/zsyh-bg.png')
	}
	
	.bank_topS {
		font-size: 34px;
	}
	
	.bank_em {
		font-size: 30px;
	}
	
	.bank_topC {
		font-size: 29px;
	}
	
	.bank_top_p {
		margin: 17px 0 21px;
	}
	
	.bank_top {
		padding-left: 26px;
	}
	
	.bank_em {
		float: right;
		margin-top: 4px;
	}
	
	.bank_bot {
		font-size: 60px;
		display: flex;
		display: -webkit-box-flex;
	}
	
	.bank_bot>span {
		float: left;
		display: inline-block;
	}
	
	.bank_botC {
		margin-left: 35px;
	}
	
	.bank_botS {
		margin-top: 13px;
	}
	
	.bank_botS>em {
		margin: 0 10px;
	}
	
	.bank_listc {
		position: relative;
		width: 712px;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	.bank_listc[data-type="0"] {
		transform: translate3d(0, 0, 0);
	}
	
	.bank_listc[data-type="1"] {
		transform: translate3d(-230px, 0, 0);
	}
	
	.delet {
		height: 222px;
		width: 227px;
		font-size: 32px;
		display: flex;
		line-height: 221px;
		position: absolute;
		top: 0;
		right: -244px;
	}
	
	.del_set {
		padding: 68px 18px 0 18px;
		flex: 1;
		line-height: 1.5;
		border: 1px solid rgb(150, 150, 150);
		border-radius: 10px 0 0 10px;
		color: rgb(74, 74, 74);
		text-align: center;
		height: 221px;
		box-sizing: border-box;
	}
	
	.del_reli {
		background-color: rgb(218, 37, 28);
		color: #fff;
		padding: 0 24px;
		height: 221px;
	}
</style>